// "use strict"
import React from 'react';
import { render } from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import Root from './containers/Root';
import mobx from 'mobx';
import { configure } from 'mobx';
import { Provider } from 'mobx-react';

import './app.global.css';

// Import our Stores Here
import coinsStore from './stores/coins';

// Enable MobX Strict Functionality
configure({ enforceActions: true });

const coinStore = new coinsStore();

const stores = {
  coins: coinStore,
};

render(
  <Provider {...stores}>
    <AppContainer>
      <Root />
    </AppContainer>
  </Provider>,
  document.getElementById('root')
);

if (module.hot) {
  module.hot.accept('./containers/Root', () => {
    const NextRoot = require('./containers/Root'); // eslint-disable-line global-require
    render(
      <Provider {...stores}>
        <AppContainer>
          <NextRoot />
        </AppContainer>
      </Provider>,
      document.getElementById('root')
    );
  });
}
